<template>
  <div class="app-title">
    <div :class="left_active?'left active':'left'">
      <a :href="left_url">
        {{$t(left_title)}}
      </a>
    </div>
    <div :class="right_active?'right active':'right'">
      <a :href="right_url">
        {{$t(right_title)}}
      </a>
    </div>
    <div :class="last_active?'last active':'last'">
      <a :href="last_url">
        {{$t(last_title)}}
      </a>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserAccountHeader',
    components: {

    },
    props:[
      "left_title",
      "left_url",
      'left_active',
      "right_title",
      "right_url",
      'right_active',
      "last_title",
      "last_url",
      'last_active',
    ],
    data() {
        return {
        };
    },
    methods: {
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .app-title{
    background-color: white;
    color:#111;
    overflow: hidden;
    height:1.2rem;
    line-height: 1.2rem;
  }
  .app-title .left,
  .app-title .right,
  .app-title .last{
    text-align: center;
    float:left;
    width:33%;
  }
  a{
    color:#111;
    display: block;
    width:100%;
    height:100%;
  }
  .app-title .left.active,
  .app-title .right.active,
  .app-title .last.active{
    color:#f36666;
  }
  .app-title .left.active a,
  .app-title .right.active a,
  .app-title .last.active a{
    color:#f36666;
  }
</style>
